<template>
    <div class="box">
        <div class="common-layout">
            <el-container>
                <!-- 左边部分 -->
                <el-aside width="40%">
                    <div class="pic">
                        <div class="pic-login"><img src="../../public/微信图片_20221215142324.png"></div>
                        <div>欢迎!</div>
                        <div>智学商城-后台管理系统</div>
                    </div>
                </el-aside>
                <!-- 右边部分 -->
                <el-main>
                    <div class="login">
                        <p>登录</p>
                        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
                            <el-form-item prop="username">
                                <el-input v-model.trim="ruleForm.username" type="text" autocomplete="off"
                                    placeholder="用户名" :prefix-icon="UserFilled"
                                    @keyup.enter.native="handlerLogin(ruleFormRef)" />
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input v-model.trim="ruleForm.password" type="password" autocomplete="off"
                                    placeholder="登录密码" :prefix-icon="Lock" show-password
                                    @keyup.enter.native="handlerLogin(ruleFormRef)" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="handlerLogin(ruleFormRef)">登录</el-button>
                            </el-form-item>
                        </el-form>
                        <p>作者：李某人</p>
                    </div>
                </el-main>
            </el-container>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { UserFilled, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter,useRoute } from "vue-router";
import { useUserStore } from "@/stores/admin";
import cookie from "js-cookie"
import {post} from '@/utils/http'
import { debounce } from "@/utils/antiShakingThrottle";
const ruleFormRef = ref<FormInstance>()
const store = useUserStore()
const route = useRoute()
const router = useRouter() //获取路由
//   用户非空验证
const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('用户名不能为空'))
    }
    callback()
}
//   用户非空验证
const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('登录密码不能为空'))
    } else {
        callback()
    }
}
//用户和密码的数据
const ruleForm = reactive({
    username: 'admin',
    password: '1234567',
})
//验证规则
const rules = reactive({
    username: [{ validator: validatePass, trigger: 'blur' }],
    password: [{ validator: validatePass2, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            //请求的参数
            let form = {
                _gp: 'admin',
                _mt: 'login',
                ...ruleForm,
            }
            // 接口请求
            post(form).then(res => {
                let { errno, errmsg, data } = res
                if (200 == errno) {
                    Object.assign(store.loginInfo,ruleForm)
                    console.log(store.loginInfo,888);
                    let now = new Date()
                    //token写入到cookie,过期时间为30分钟
                    now.setTime(now.getTime() + 1000 * 60 * 30)
                    // console.log(now)
                    cookie.set("token", data, { expires: now })
                    ElMessage.success('登录成功')
                    return Promise.resolve(data)
                } else {
                    return Promise.reject(errmsg)
                }
            }).then(res => { //获取用户信息
                //用户信息请求的参数
                let params = {
                    _gp: 'admin',
                    _mt: 'info'
                }
                post( params).then(res => {
                    console.log(res.data);
                    let { errno, errmsg, data } = res
                    if (200 == errno) {
                        store.setUser({ ...data })
                        let back = route.query.back
                        if(back){
                            router.replace(back as string)
                            return
                        }
                        router.replace("/index")
                    } else {
                        return Promise.reject(errmsg)
                    }
                })
            }).catch(err => {
                ElMessage.error(err)
            })
        } else {
            ElMessage.error('请输入账号和密码')
            return false
        }
    })
}
//防抖
const handlerLogin = debounce(submitForm,300)



const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>
<style lang="less" scoped>
.box {
    width: 100%;
    height: 100vh;
    display: flex;
    background: url("../../public/微信图片_20221215121418.jpg") 0px 0px no-repeat;
    background-size: 100% 100%;

    .common-layout {
        width: 50%;
        margin: auto;

        .el-container {
            height: 60vh;

            // 左边部分
            .el-aside {
                background-color: #005DE9;
                display: flex;
                border-radius: 5px 0px 0px 5px;

                .pic {
                    margin: auto;
                    text-align: center;
                    color: #fff;

                    .pic-login {
                        margin: auto;
                        width: 100px;
                        height: 100px;
                        border-radius: 50%;
                        box-shadow: 9px -10px 35px 1px #dee3eb;

                        img {
                            width: 100px;
                            height: 100px;
                        }
                    }

                    >div {
                        margin-top: 10px;
                    }
                }
            }

            .el-aside::-webkit-scrollbar {
                display: none;
            }

            //右边部分
            .el-main {
                background-color: #fff;
                border-radius: 0px 5px 5px 0px;
                display: flex;
                width: 60%;

                .login {
                    margin: auto;
                    text-align: center;
                    width: 80%;

                    p {
                        margin-bottom: 15px;
                    }

                    /deep/ .el-input__inner {
                        height: 35px;
                    }

                    .el-button--primary {
                        width: 130px;
                        margin: auto;
                    }
                }
            }

            .el-main::-webkit-scrollbar {
                display: none;
            }
        }
    }
}
</style>